import React from 'react';
import ReactDom from 'react-dom';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Alert from './Alert'
import './Pagehome.css'
import { Table, Divider, Tag, Popconfirm, Button, Input  } from 'antd';
// export default () => {
//     return <div>New Page</div>;
//   };

class Pagehome  extends  React.Component{
    constructor (props){
        super();
        this.state={
            data:[
                {
                  key: '1',
                  name: 'John Brown',
                  age: 32,
                  address: 'New York No. 1 Lake Park',
                  tags: ['nice', 'developer'],
                },
                {
                  key: '2',
                  name: 'Jim Green',
                  age: 42,
                  address: 'London No. 1 Lake Park',
                  tags: ['loser'],
                },
                {
                  key: '3',
                  name: 'Joe Black',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park',
                  tags: ['cool', 'teacher'],
                }
              ],
              count:4 
        }
    }
    componentDidMount() {
      const list = JSON.parse(localStorage.getItem('list'));
      if(list){
        this.setState({
            data:list
        })
      }
    }
        handleclick=key=>{
          console.log(key)
            const data = [...this.state.data];
            this.setState({ data: data.filter(item => item.key !== key) })
            console.log(data.filter(item => item.key !== key))
            let only = data.filter(item => item.key !== key)
            localStorage.setItem('list',JSON.stringify(only));
        }
        handleAdd=()=>{
            const { count, data } = this.state;  
            const list = {
                key : `${count}`,
                name: `newname${data.length}`,
                age: count*5+1,
                address:'厦门思明区',
                tags:['dady','year']
            }
            this.setState({
                data:[...data,list],
                count: count+1
            })

        }
        handleedit(e){
          console.log(e)
        }
        selectRow(record){
            console.log(record)
            this.props.history.push({pathname:'/shop/shopping',  state : {
                'data':record,
                "canshuB":record.key,
            }});
        }
        getChildValue(value){
            console.log(value)
            const tag = []
            tag.push(value.tags)
            console.log(tag)
            const { count, data } = this.state;
            if(value){
                const list = {
                  key : value.count,
                  name: value.name,
                  age: value.age,
                  address:value.adress,
                  tags:tag
              }
              this.setState({
                  data:[...data,list],
                  count: count+1
              })
              data.push(list)
              localStorage.setItem('list',JSON.stringify(this.state.data));
            }
        }
        const columns = [
            {
              title: 'Name',
              dataIndex: 'name',
              key: 'name',
              render: (text,record) =>  <Input placeholder="请输入名字" defaultValue={text} value={text} onChange={this.handleedit.bind(this)}/>,
            },
            {
              title: 'Age',
              dataIndex: 'age',
              key: 'age',
            },
            {
              title: 'Address',
              dataIndex: 'address', 
              key: 'address',
            },
            {
              title: 'Tags',
              key: 'tags',
              dataIndex: 'tags',
              render: tags => (
                <span>
                  {tags.map(tag => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                      color = 'volcano';
                    }
                    return (
                      <Tag color={color} key={tag}>
                        <a>{tag.toUpperCase()}</a>
                      </Tag>
                    );
                  })}
                </span>
              ),
            },
            {
              title: 'Action',
              key: 'action',
              render: (text, record) => (
                <span>
                  <a onClick={this.selectRow.bind(this,record)}>详情{record.name}</a>
                  <Divider type="vertical" />
                  {/* <a onClick={this.handleclick(text,record)}>Delete</a> */}
                  <Popconfirm title="Sure to delete?" onConfirm={() => this.handleclick(record.key)}>
                    <a>Delete</a>
                  </Popconfirm>
                </span>
              ),
            },
          ];
        render() {
            return(
              <PageHeaderWrapper>
                <div className='formbody'>
                    {/* <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
                    Add a row
                    </Button> */}
                    <Alert onValue={this.getChildValue.bind(this)}  count={this.state.count}/>
                  <Table columns={this.columns} dataSource={this.state.data} />
                </div>
                </PageHeaderWrapper>
            )
        }
}
export default Pagehome;